import Vue from 'vue';
// 指令可以大摇大摆操作dom
/* eslint-disable*/
Vue.directive('hintText', {
  bind(el, binding) {
    console.log(binding);
    let hint = document.createElement('span');
    hint.className = 'hintText';
    hint.innerText = '提示文字';
    hint.style.width = '2rem';
    hint.style.height = '1rem';
    hint.style.textAlign = 'center';
    hint.style.background = '#fff';
    hint.style.display = 'none';
    hint.style.position = 'relative';
    hint.style.left = '2.5rem';
    hint.style.top = '-1rem';
    binding.ele = hint;
    hint.style.cssText += binding.value;
    let index = binding.rawName.indexOf('.');
    if (binding.rawName.split('').splice(index + 1).join('') === 'top') {
      hint.style.left = '0';
      hint.style.top = '-2.5rem';
    }
    if (binding.rawName.split('').splice(index + 1).join('') === 'bottom') {
      hint.style.left = '0';
      hint.style.top = '1rem';
    }
    if (binding.rawName.split('').splice(index + 1).join('') === 'right') {
      hint.style.left = '2.5rem';
      hint.style.top = '-1rem';
    }
    if (binding.rawName.split('').splice(index + 1).join('') === 'left') {
      hint.style.left = '-2.5rem';
      hint.style.top = '-1rem';
    }
  },
  inserted(el, binding) {
    el.appendChild(binding.ele);
    el.onclick = () => {
      binding.ele.style.display = 'inline-block';
    };
  },
});
